<template>
    <div class="appraisal-report">
         <el-row>
             <el-col :span="18">
                 <div class="base appraisal-report-model" ref="baseZb">
                    <normal-title size="small" titles="基础指标">
                                    <span slot="titleMore" class="title-lines"></span>
                    </normal-title>
                    <el-row class="traning-parameters">
                        <el-col :span="6">
                            <el-row>算法名称</el-row>
                            <el-row>逻辑回归</el-row>
                        </el-col>
                        <el-col :span="6">
                            <el-row>学习率alpha系数</el-row>
                            <el-row>.1</el-row>
                        </el-col>
                        <el-col :span="6">
                            <el-row>算法模式</el-row>
                            <el-row>逻辑回归</el-row>
                        </el-col>
                        <el-col :span="6">
                            <el-row>最大训练轮数</el-row>
                            <el-row>2</el-row>
                        </el-col>
                    </el-row>
                 </div>
                 <div class="graphical-presentation appraisal-report-model" ref="graphicalPresentation">
                     <normal-title size="small" titles="图形化展示">
                                <span slot="titleMore" class="title-lines"></span>
                    </normal-title>
                    <GraphicalPresentation></GraphicalPresentation>
                 </div>
                <div class="thresholdValue appraisal-report-model" ref="thresholdValue">
                     <normal-title size="small" titles="阈值划分">
                                <span slot="titleMore" class="title-lines"></span>
                     </normal-title>
                     <div class="threshold-value-control">
                        <el-row class="silder-box">
                             <el-col :span="4">概率选择</el-col>
                             <el-col :span="20">
                                    <el-slider v-model="provalueSlide" ></el-slider>
                             </el-col>
                         </el-row>
                         <el-row>
                             <el-col :span="4">样本选择</el-col>
                             <el-col :span="20">
                                    <el-slider v-model="sampleValueSlide" ></el-slider>
                             </el-col>
                         </el-row>
                     </div>
                </div>
                <div class="confusionMatrix appraisal-report-model" ref="confusionMatrix">
                    <normal-title size="small" titles="混淆矩阵">
                                <span slot="titleMore" class="title-lines"></span>
                     </normal-title>
                     <div class="confusion-matrix-box">
                         <el-row>
                             <el-col :span="16" class="calculate-matrix">
                                  <el-row class="calculate-matrix-item">
                                      <el-col :span="6">

                                      </el-col>
                                       <el-col :span="6">
                                            预测白样本
                                      </el-col>
                                       <el-col :span="6">
                                           预测黑样本
                                      </el-col>
                                  </el-row>
                                  <el-row class="calculate-matrix-item">
                                       <el-col :span="6">
                                           真实白样本
                                      </el-col>
                                       <el-col :span="6" class="green-box">
                                           xx
                                      </el-col>
                                       <el-col :span="6" class="yellow-box">
                                           xx
                                      </el-col>
                                      <el-col :span="6" class="blue-box">
                                          xx
                                      </el-col>
                                  </el-row>
                                  <el-row class="calculate-matrix-item">
                                       <el-col :span="6">
                                           真实黑样本
                                      </el-col>
                                       <el-col :span="6" class="yellow-box">
                                           xx
                                      </el-col>
                                       <el-col :span="6" class="green-box">
                                           xx
                                      </el-col>
                                       <el-col :span="6" class="blue-box">
                                           xx
                                      </el-col>
                                  </el-row>
                                  <el-row class="calculate-matrix-item">
                                       <el-col :span="6">
                                      </el-col>
                                       <el-col :span="6"  class="fos-box">
                                           xxx
                                      </el-col>
                                       <el-col :span="6" class="fos-box">
                                           xx
                                      </el-col>
                                  </el-row>
                             </el-col>
                             <el-col :span="8" class="appraisal-sizing">
                                 <el-row>
                                     <el-col :span="12">
                                         精准率
                                         <span class="eng-name">
                                             (Precison)
                                         </span>
                                     </el-col>
                                     <el-col :span="12">xx</el-col>
                                 </el-row>
                                  <el-row>
                                     <el-col :span="12">
                                         召回率
                                         <span class="eng-name">
                                             (Recall)
                                         </span>
                                     </el-col>
                                     <el-col :span="12">xx</el-col>
                                 </el-row>
                                  <el-row>
                                     <el-col :span="12">
                                         特异性
                                         <span class="eng-name">
                                             (TNR)
                                         </span>
                                     </el-col>
                                     <el-col :span="12">xx</el-col>
                                 </el-row>
                                  <el-row>
                                     <el-col :span="12">
                                         负例预测值
                                         <span class="eng-name">(NPV)</span>
                                     </el-col>
                                     <el-col :span="12">xxx</el-col>
                                 </el-row>
                                  <el-row>
                                     <el-col :span="12">
                                         综合评价指标
                                         <span class="eng-name">(F1-Measure)</span>
                                     </el-col>
                                     <el-col :span="12">xx</el-col>
                                 </el-row>
                             </el-col>
                         </el-row>
                     </div>
                </div>
                 <div class="probability-piecewise appraisal-report-model" ref="probabilityPiecewise">
                      <normal-title size="small" titles="概率分段统计">
                                <span slot="titleMore" class="title-lines"></span>
                     </normal-title>
                     <div class="probability-piecewise-box">
                         <el-table :data="tableData">
                                <template v-for="item in tableCloums">
                                    <el-table-column
                                        :key="item.key"
                                        :prop="item.key"
                                        :label="item.label"
                                        >
                                    </el-table-column>
                                </template>
                         </el-table>
                     </div>
                 </div>
                  <div class="visualization-show" ref="visualizationShow">
                      <normal-title size="small" titles="可视化展示">
                                <span slot="titleMore" class="title-lines"></span>
                     </normal-title>
                 </div>
             </el-col>
        </el-row>
        <div class="tag-box" :class="{'tag-box-active':documentScroll>0}">
              <el-steps direction="vertical" :active="currentStep" :space="50">
                <el-step title="1 基础指标" name="1" @click.native="scolltop(1)" :class="{'step_active': currentStep ==1}">
                    <span class="circle-icon" slot="icon"></span>
                </el-step>
                <el-step title="2 图形化展示" name="2" :class="{'step_active': currentStep ==2}">
                    <span class="circle-icon" slot="icon" @click.native="scolltop(2)"></span>
                </el-step>
                <el-step title="3 阈值划分" name="3" :class="{'step_active': currentStep ==3}">
                    <span class="circle-icon" slot="icon" @click.native="scolltop(3)"></span>
                </el-step>
                <el-step title="4 混淆矩阵" name="4" @click.native="scolltop(4)" :class="{'step_active': currentStep ==4}">
                     <span class="circle-icon" slot="icon"></span>
                </el-step>
                <el-step title="5 概率分段统计" name="5" @click.native="scolltop(5)" :class="{'step_active': currentStep ==5}">
                      <span class="circle-icon" slot="icon"></span>
               </el-step>
                <el-step title="6 可视化展示" name="6" @click.native="scolltop(6)" :class="{'step_active': currentStep ==6}">
                       <span class="circle-icon" slot="icon"></span>
                </el-step>
            </el-steps>
        </div>
    </div>
</template>
<script>
import NormalTitle from '@/components/NormalTitle'
import GraphicalPresentation from '../graphyDisplay' // 图形化展示
export default {
    name: 'AppraisalReport', // 评估报告
    components: {
        NormalTitle,
        GraphicalPresentation
    },
    data () {
        return {
            provalueSlide: 0, // 概率slideValue
            sampleValueSlide: 0, // 样本slideValue
            tableCloums: [
                {
                    key: 'a',
                    label: '预测概率分组'
                },
                {
                    key: 'b',
                    label: '样本占比'
                },
                {
                    key: 'c',
                    label: '真正例'
                },
                {
                    key: 'd',
                    label: '伪正例'
                },
                {
                    key: 'e',
                    label: '伪负例'
                },
                {
                    key: 'f',
                    label: '真负例'
                },
                {
                    key: 'g',
                    label: '准确率'
                },
                {
                    key: 'h',
                    label: '召回率'
                },
                {
                    key: 'i',
                    label: '特异性'
                },
                {
                    key: 'j',
                    label: '本组AUC'
                },
                {
                    key: 'k',
                    label: '累计AUC'
                }
            ],
            tableData: [
                {
                    a: '1',
                    b: '1',
                    c: '1',
                    d: '1',
                    e: '1',
                    f: '1',
                    g: '1',
                    h: '1',
                    i: '1',
                    j: '1',
                    k: '1'
                },
                {
                    a: '1',
                    b: '1',
                    c: '1',
                    d: '1',
                    e: '1',
                    f: '1',
                    g: '1',
                    h: '1',
                    i: '1',
                    j: '1',
                    k: '1'
                },
                {
                    a: '1',
                    b: '1',
                    c: '1',
                    d: '1',
                    e: '1',
                    f: '1',
                    g: '1',
                    h: '1',
                    i: '1',
                    j: '1',
                    k: '1'
                }
            ],
            documentScroll: 0,
            currentStep: 1
        }
    },
    methods: {
        bindScroll () {
            let _this = this
            let baseZb = this.$refs.baseZb // 标准指标
            this.baseTo = baseZb.clientHeight
            let graphicalPresentation = this.$refs.graphicalPresentation // 图形化展示
            this.graphicalPresentationTo = graphicalPresentation.clientHeight
            let thresholdValue = this.$refs.thresholdValue // 阈值划分
            this.thresholdValueTo = thresholdValue.clientHeight + this.graphicalPresentationTo
            let confusionMatrix = this.$refs.confusionMatrix // 混淆矩阵
            this.confusionMatrixTo = confusionMatrix.clientHeight + this.thresholdValueTo
            let probabilityPiecewise = this.$refs.probabilityPiecewise // 概率分段统计
            this.probabilityPiecewiseTo = probabilityPiecewise.clientHeight + this.confusionMatrixTo
            let visualizationShow = this.$refs.visualizationShow // 可视化展示
            this.visualizationShowTo = visualizationShow.clientHeight + this.probabilityPiecewiseTo
            document.getElementById('scrollBox').onscroll = function () {
                var scrollTop = this.scrollTop
                _this.documentScroll = scrollTop
                if (scrollTop <= _this.baseTo) {
                    _this.currentStep = 1
                } else if (scrollTop > _this.baseTo && scrollTop < _this.graphicalPresentationTo) {
                    _this.currentStep = 2
                } else if (scrollTop >= _this.graphicalPresentationTo && scrollTop < _this.thresholdValueTo) {
                    _this.currentStep = 3
                } else if (scrollTop >= _this.thresholdValueTo && scrollTop < _this.confusionMatrixTo) {
                    _this.currentStep = 4
                } else if (scrollTop >= _this.confusionMatrixTo && scrollTop < _this.probabilityPiecewiseTo) {
                    _this.currentStep = 5
                } else if (scrollTop >= _this.probabilityPiecewiseTo && scrollTop < _this.visualizationShowTo) {
                    _this.currentStep = 6
                }
                console.log(_this.currentStep)
            }
        },
        scolltop (index) {
            let y = 0
            let _this = this
            switch (index) {
            case 1 : y = 0; break
            case 2 : y = _this.baseTo; break
            case 3 : y = _this.graphicalPresentationTo; break
            case 4 : y = _this.thresholdValueTo; break
            case 5 : y = _this.confusionMatrixTo; break
            case 6 : y = _this.probabilityPiecewiseTo; break
            }
            // let cons = y
            // if (this.times) {
            //     return false
            // }
            // this.times = setInterval(() => {
            //     cons -= 1
            //     document.getElementById('scrollBox').scrollTo(0, cons)
            //     if (cons === 0) {
            //         this.times = null
            //         clearInterval(this.times)
            //     }
            // }, 50)
            document.getElementById('scrollBox').scrollTo(0, y)
        }
    },
    mounted () {
        this.bindScroll()
        this.loadGraph = true
    }
}
</script>
<style lang="less">
.appraisal-report{
    .title-lines {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 150px);
        float: right;
        height: 1px;
        background: #464D5F;
        position: relative;
        top: 11px;
    }
    .appraisal-report-model {
        margin-top:20px;
    }
    .traning-parameters {
            border-top: 1px solid #CAD3DC;
            border-left: 1px solid #CAD3DC;
            .el-col{
                .el-row{
                    border-right: 1px solid #CAD3DC;
                    border-bottom: 1px solid #CAD3DC;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    &:first-child {
                        background: #ECF4F9;
                    }
                }
            }
     }
     .threshold-value-control {
         padding:60px 0;
         .el-row{
             width: 60%;
             margin: 0 auto;
         }
     }
     .tag-box {
         position: absolute;
         right: 5%;
         top: 200px;
         .el-step__icon {
                border: 0;
               .circle-icon {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #D1D1D1;
                }
         }
     }
     .tag-box-active{
         position: fixed;
         right: calc( 5% + 5px);
         top: 260px;
     }
     .confusion-matrix-box {
         width: 100%;
         box-sizing: borer-box;
         padding-left: 10%;
         .calculate-matrix {
            .calculate-matrix-item {
                height: 70px;
                .el-col {
                    height: 100%;
                    text-align: center;
                    line-height: 70px;
                    font-size: 16px;
                    color: #464D5F;
                }
                .yellow-box{
                    background:#FFE18E;
                    color: #fff;
                }
                .green-box {
                    background: #3B9A9C;
                    color: #fff;
                }
                .blue-box {
                    background:#78C8FE;
                    color: #fff;
                }
                .fos-box {
                    background: #4BC2C5;
                    color: #fff;
                }
            }
        }
     }
     .appraisal-sizing {
         font-size: 16px;
         padding: 5%;
         .el-col {
             height:50px;
             .eng-name{
                  display: block;

             }
             &:last-child{
                 line-height: 50px;
             }
         }

     }
     .silder-box {
         margin-bottom: 20px;
     }
     .el-step {
         cursor: pointer;
        .is-finish {
            color: #c0c4cc;
        }
        .is-process {
            color: #c0c4cc;
            font-weight: normal;
        }
     }
     .step_active {
        .is-finish {
            color: #409EFF;
        }
     }
}
</style>
